<script setup lang="ts">
const props = defineProps({
  goodsList: {
    type: Array,
    default: () => []
  },
  goodsColumns: {
    type: Array,
    default: () => []
  },
  getSummaries: null
});

const getGoodsList = () => {
  return props.goodsList;
};

defineExpose({ getGoodsList });
</script>

<template>
  <div class="goods-table">
    <pure-table
      row-key="id"
      align-whole="center"
      show-summary
      :summary-method="props.getSummaries"
      :header-cell-style="{
        background: 'var(--el-fill-color-light)',
        color: 'var(--el-text-color-primary)'
      }"
      max-height="500"
      :data="goodsList"
      :columns="goodsColumns"
    >
      <template #amount="{ row }">
        <el-input-number
          v-model="row.goodsAmount"
          :precision="0"
          :min="1"
          :max="10000"
        />
      </template>
    </pure-table>
  </div>
</template>
<style lang="scss" scoped>
.goods-table {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
:deep(.goods-table .el-table__footer-wrapper tfoot td.el-table__cell) {
  border-top: 1px solid #efefef !important;
  background-color: #fff !important;
}
</style>
